<template>
<!--    <u-skeleton
    	rows="2"
    	:loading="loading"
    	:title="true"
    	:rows="7"
    	rowsHeight="100rpx"
    > -->
        <view class="container">
            <view class="steps-box">
                <u-steps :current="stepCurrent">
                    <u-steps-item title="待发货"></u-steps-item>
                    <u-steps-item title="待收货" ></u-steps-item>
                    <u-steps-item title="已收货"></u-steps-item>
                </u-steps>
            </view>
            
            <view class="addres" v-if="addressData">
                <view class="addres-one">
                    <text class="addres-nickname">{{ $text(addressData.name) }}</text>
                    <text class="addres-tel">{{ $text(addressData.tel) }}</text>
                </view>
                <view class="addres-city">
                    <text>{{ $text(addressData.province) }}</text>
                    <text>{{ $text(addressData.city) }}</text>
                    <text>{{ $text(addressData.county) }}</text>
                    <text>{{ $text(addressData.details) }}</text>
                </view>
            </view>
            
            <view class="shopp-num">
                共{{ $text(detail.sum) }}瓶商品
            </view>
            
            <view class="shopp">
                <u--image :src="$imgurl(detail.files)" width="150rpx" height="150rpx"></u--image>
                <view class="shopp-info">
                    <view class="shopp-title">
                        <view class="shopp-title-text">{{ $text(detail.pr_title) }}</view>
                        <view class="shopp-num-x">
                            <text class="shopp-num-unit">x</text>
                            <text class="shopp-num-num">{{ $text(detail.sum) }}</text>
                        </view>
                    </view>
                    
                    <view class="shopp-ml">
                        {{ $text(detail.sp_title) }}
                    </view>
                    
                    <view class="shopp-price">
                        {{ $text(detail.price) }}<text class="shopp-mini-text">积分</text>
                    </view>
                    
    <!--                <view class="shopp-price">
                        ￥{{ $text(detail.ty_name) }}
                    </view> -->
                </view>
            </view>
            
            <view class="server" @click="$u.vuex.dispatch('user/makePhoneCallServer')">
                <u-icon name="server-fill" size="40rpx" color="#FE2C1D"></u-icon>
                <text class="server-t">联系客服</text>
            </view>
            
            <view class="shopp-detail">
                <view class="shopp-cell">
                    <view class="cell-l">订单号：</view>
                    <view class="cell-r">
                        {{ $text(detail.order_ddid) }}
                        <text class="cell-copy" @click="copy(detail.order_ddid)">复制</text>
                    </view>
                </view>
                <view class="shopp-cell" v-if="detail.is_zt != 0">
                    <view class="cell-l">快递单号：</view>
                    <view class="cell-r">
                        {{ $text(detail.kd_ddid) }}
                        <text class="cell-copy" @click="copy(detail.kd_ddid)">复制</text>
                    </view>
                </view>
                <view class="shopp-cell" v-if="detail.time">
                    <view class="cell-l">下单时间：</view>
                    <view class="cell-r">{{ $text(detail.time) }}</view>
                </view>
                <view class="shopp-cell" v-if="detail.pay_time">
                    <view class="cell-l">支付时间：</view>
                    <view class="cell-r">{{ $text(detail.pay_time) }}</view>
                </view>
                <view class="shopp-cell" v-if="detail.fh_time">
                    <view class="cell-l">发货时间：</view>
                    <view class="cell-r">{{ $text(detail.fh_time) }}</view>
                </view>
                <view class="shopp-cell" v-if="detail.sh_time">
                    <view class="cell-l">收货时间：</view>
                    <view class="cell-r">{{ $text(detail.sh_time) }}</view>
                </view>
                <view class="shopp-cell" v-if="detail.bz_text" style="display: block;">
                    <view class="cell-l">备注：</view>
                    <u-textarea :value="detail.bz_text" disabled border="none" customStyle="margin-top: 15rpx;" ></u-textarea>
                </view>
<!--                <view class="shopp-cell">
                    <view class="cell-l">支付状态：</view>
                    <view class="cell-r">已支付</view>
                </view> -->
            </view>
            
<!--            <view class="shopp-detail">
                <view class="shopp-cell">
                    <view class="cell-l">商品总价：</view>
                    <view class="cell-r">￥99.00</view>
                </view>
            </view>
            -->
           <view class="actual">
                <text class="actual-label">总金额：</text>
                <text class="actual-val">￥{{ $text(detail.zong_price) }}</text>
            </view>
            
            <view class="img-box"v-if="detail.ty_files">
                <view class="img-box-title">瓶样图片</view>
                <view class="img-box-img">
                    <u--image :src="$imgurl(detail.ty_files)" width="310rpx" height="300rpx" customStyle="margin: 10rpx;" 
                        @click="$u.func.previewImage(0, [$imgurl(detail.ty_files)])"></u--image>
                </view>
            </view>
            
<!--            <view class="img-box" v-if="detail.files">
                <view class="img-box-title">DIY图片</view>
                <view class="img-box-img">
                    <u--image :src="$imgurl(detail.files)" width="310rpx" height="300rpx" customStyle="margin: 10rpx;" 
                        @click="$u.func.previewImage(0, [$imgurl(detail.files)])"></u--image>
                </view>
            </view> -->
        <HomeNavBtn></HomeNavBtn>
        </view>
    <!-- </u-skeleton> -->
</template>

<script>
    const app = getApp()
	export default {
		data() {
			return {
                loading: true,
                addressData: null,
                detail: {},
                gyConfig: app.globalData.gyConfig
			}
		},
        onLoad(params) {
            this.id = params.id
            this.getData()
        },
        computed: {
            stepCurrent(){
                const { is_pay, is_zt } = this.detail
                return {
                    "0": 0,
                    "1": 1,
                    "2": 2,
                }[String(is_zt)]
            }
        },
		methods: {
			getData() {
                uni.showLoading({
                    mask: true
                })
				this.$u.request('user.uintegral_order_inone', {
					id: this.id,
				}).then(res => {
                    this.detail = res.data
                    this.loading = false
                    uni.hideLoading()
                    
                    
                    this.$u.request('user.address_one', {
                    	id: res.data.address_id,
                    }).then(res => {
                        this.addressData = res.data
                    }).catch(e => {
                    	
                    })
                    
                    
				}).catch(e => {
                    uni.hideLoading()
					this.$u.toast(e.message || '')
				})
                
				

			},
            copy(text){
                uni.setClipboardData({
                    data: text
                })
            }
		}
	}
</script>

<style lang="scss" scoped>
    page{
        background-color: #F6F6F6;
    }
	.container{
      
        
        .steps-box{
            background-color: #ffffff;
            padding: 40rpx 0 20rpx 0;
        }
        
        .addres{
            padding: 40rpx 40rpx;
            margin-top: 22rpx;
            background-color: #ffffff;
            
            .addres-nickname,
            .addres-tel{
                font-size: 30rpx;
            }
            
            .addres-tel{
                margin-left: 40rpx;
            }
            
            .addres-city{
                margin-top: 10rpx;
                
                text{
                    margin-right: 12rpx;
                    color: #868686;
                    font-size: 28rpx;
                }
            }
        }
        
        .shopp-num{
            padding: 20rpx 40rpx ;
            margin-top: 18rpx;
            background-color: #ffffff;
            line-height: 60rpx;
            font-size: 30rpx;
        }
        
        .shopp{
            display: flex;
            margin-top: 2rpx;
            padding: 40rpx;
            background-color: #ffffff;
            
            .shopp-info{
                flex: 1;
                width: 0;
                margin-left: 30rpx;
                
                .shopp-title{
                    display: flex;
                    
                    .shopp-title-text{
                        flex: 1;
                        font-size: 30rpx;
                    }
                    
                    .shopp-num-x{
                        
                        .shopp-num-unit{
                            font-size: 22rpx;
                            color: #888888;
                        }
                        
                        .shopp-num-num{
                            font-size: 28rpx;
                            color: #888888;
                        }
                        
                        text{
                            vertical-align: bottom;
                        }
                    }
                }
                
                .shopp-ml{
                    margin-top: 10rpx;
                    font-size: 24rpx;
                    color: #888888;
                }
                
                .shopp-price{
                    margin-top: 10rpx;
                    font-size: 30rpx;
                    color: #FE2C1D;
                }
                
                .shopp-mini-text{
                    font-size: 24rpx;
                }
            }
        }
        
        .server{
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: 2rpx;
            padding: 40rpx;
            background-color: #ffffff;
            .server-t{
                text-align: 30rpx;
                 color: #FE2C1D;
                margin-left: 15rpx;
            }
        }
        
        .shopp-detail{
            padding: 20rpx 40rpx;
            margin-top: 22rpx;
            background-color: #ffffff;
            
            .shopp-cell{
                display: flex;
                justify-content: space-between;
                margin: 10rpx 0;
                line-height: 50rpx;
                
                .cell-l{
                    font-size: 30rpx;
                    margin-right: 15rpx;
                }
                
                .cell-r{
                    font-size: 30rpx;
                    color: #868686;
                }
                
                .cell-copy{
                    display: inline-block;
                    padding: 3rpx 20rpx;
                    margin-left: 20rpx;
                    font-size: 24rpx;
                    line-height: 30rpx;
                    color: #676767;
                    border: 1px solid #676767;
                    border-radius: 1rpx;
                }
            }
        }
        
        .actual{
            margin-top: 2rpx;
            padding: 40rpx;
            text-align: right;
            background-color: #ffffff;
            
            .actual-label,
            .actual-val{
                font-size: 30rpx;
                color: #FE2C1D;
            }
            
            .actual-label{
                margin-right: 20rpx;
            }
        }
        
        .img-box{
            margin-top: 22rpx;
            padding: 40rpx;
            
            background-color: #ffffff;
            
            .img-box-title{
                font-size: 30rpx;
                margin-bottom: 20rpx;
            }
            
            .img-box-img{
                display: flex;
                flex-wrap: wrap;
            }
        }
    }
</style>